<template>
	<h3>2.显示计算属性</h3>
	<button @click="changemsg">点击修改</button>
	<p>msg的值:{{msg}}</p>
	<p>newmsg的值：{{newmsg}}</p>
	
	<h3>计算商品的价格</h3>
	<p>商品的价格：{{good.price}} 元</p>
	<button @click="updateprice">修改价格</button>
	<p>商品的数量：{{num}} 部</p>
	<input type="text" v-model="num" />
	<p>总价格：{{totalprice}}元</p>
</template>

<script setup>
	//1.定义计算属性
	//计算属性通过computed()函数定义，该函数的参数为一个回调函数，
	//开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，
	import {computed,ref,reactive} from 'vue'
	const msg=ref('初始数据')
	const m=ref('')
	const changemsg=()=>{
		msg.value='数据修改了'
	}
	const newmsg= computed(()=>{
		m.value=msg.value+'计算属性'
		return m.value;
	})
	
	//计算商品的价格
	const good=reactive({
		name:'手机',
		price:3000
	})
	const updateprice=()=>{
		good.price=2888
	}
	const num=ref(1)
	const totalprice=computed(()=>{
		return good.price*num.value;
	})
	
	
</script>

<style>
</style>